<template>
	<view class="body">
		<view class="header">
			<view class="ls-f-ac">
				<image src="../../static/images/common_icon_school_small@3x.png" class="icon" mode=""></image>
				<view class="title">
					课程成果展示
				</view>
			</view>
			<view class="content">
				我是文字哈哈哈哈我是文字哈哈哈哈我是文字哈哈哈哈我是文字哈哈哈哈我是文字哈哈哈哈我是文字哈哈哈哈我是文字哈哈哈哈我是文字哈哈哈哈我是文字哈哈哈哈我是文字哈哈哈哈
			</view>
		</view>
		<view class="tabs">
		    <u-tabs :list="tabs"
		            name="name"
					item-width="350"
		            paddingRight="50rpx"
		            :current="currentTabIndex"
		            @change="tabChange"
		            height="80"
		            font-size="32"
		            bar-width="64"
		            gutter="44"
		            bg-color=" #f3f3f3"
		            inactive-color="#666666"
		            active-color="#63B9F2"></u-tabs>
		    
		</view>
		<view class="images">
			<image @click="showImg(index)" :src="item" v-for="(item,index) in imgList"  class="img" mode="aspectFill"></image>
		</view>
		<u-popup v-model="showVideo"
		         mode="center"
		         border-radius="10"
				 width ="750"
		         >
		<view class="video-box">
			<video :src="videoUrl" class="video" id="video" controls></video>
		</view>
		    
		
		</u-popup>
		
	</view>
</template>

<script> 

export default{
	data() {
		return {
			video:null,
			videoUrl:'https://www.w3school.com.cn/i/movie.ogg',
			showVideo:false,
			selecIndex: 0,
			currentTabIndex: 0,
			tabs:[{
				name:'图片'
			},
			{
				name:'视频'
			},
			],
			imgList:['../../static/images/join102@2x.png','../../static/images/join102@2x.png']
		}
	},
	onLoad() {
		
	},
	methods:{
		
		tabChange(e){
			this.currentTabIndex = e;
		},
		showImg(index){
			if (this.currentTabIndex==0) {
				uni.previewImage({
					current:index,
					urls:this.imgList
				})
			}else{
				this.showVideo=true
				if (this.video==null) {
					this.video= uni.createInnerAudioContext('video')
				}
				console.log(this.video);
				this.video.autoplay=true
				this.video.src='https://www.w3school.com.cn/i/movie.ogg'
				this.videoUrl=this.video.src
				this.video.play()
				// this.video.requestFullScreen()
				
			}
			
		}
	}
}
</script>

<style scoped lang="scss">
	.video-box{
		
		width: 750rpx;
		height: 450rpx;
		.video{
			width: 750rpx;
			height: 450rpx;
		}
	}
	.images{
		flex-wrap:wrap;
		padding: 0 20rpx;
		.img{
			border-radius: 15rpx;
			margin-top: 16rpx;
			width: 218rpx;
			height: 218rpx;
			margin-left: 16rpx;
		}
	}
	.tabs {
	    position: relative;
		margin-top: 15rpx;
	    .tabs_img {
	        position: absolute;
	        right: 0;
	        top: 16rpx;
	        width: 92rpx;
	        height: 48rpx;
	    }
	}
	.header {
		padding: 32rpx;
		border-radius: 0 0 32rpx 32rpx;
		background-color: #fff;

		.content {
			margin-top: 32rpx;
			margin-left: 10rpx;
			font-size: 28rpx;
			color: #333333;
		}

		.title {
			font-weight: bold;
			font-size: 36rpx;
		}

		.icon {
			margin-right: 16rpx;
			width: 48rpx;
			height: 48rpx;
		}
	}
</style>
